<template>
	<div style="display: flex;align-items: center;flex-wrap: wrap;">
		<div v-for="(str, index) in array" :key="str" :style="[custStyle(index)]" class="content" @click="onClick(index)">
			{{index === 9 ? (decimal ? '.' : '') : str}}
		</div>
		<div :style="[custStyle(10)]" class="content" @click="onClick(10)">
			{{array[9]}}
		</div>
		<div :style="[custStyle(11)]" class="content" @click="onClick(11)">
			<uni-icons custom-prefix="iconfont" type="icon-jtgd" size="30" color="#999" style="transform: rotate(180deg);"></uni-icons>
		</div>
	</div>
</template>

<script>
	
	import main from './'
	
	const numbers = '1234567890'
	
	/**
	 * 数组键盘
	 */
	export default {
		emits: ['click'],
		props: {
			/**
			 * 随机类型
			 * 0：不随机。自然顺序
			 * 1：按正顺序
			 * 2：按倒顺序
			 * 3：初始化随机
			 * 4：每次都随机
			 */
			randomType: {
				type: Number,
				default: 0
			},
			// 单个的高度
			height: {
				type: Number,
				default: 60
			},
			// 是否显示小数点
			decimal: Boolean
		},
		data() {
			return {
				array: []
			}
		},
		mounted() {
			if (this.randomType === 3 || this.randomType === 4) {
				this.array = main.handleRandom(numbers).split('')
			} else if (this.randomType === 0 || this.randomType === 1) {
				this.array = numbers.split('')
			} else if (this.randomType === 1) {
				this.array = '9876543210'.split('')
			}
		},
		methods: {
			custStyle(index) {
				return {
					height: this.height + 'px',
					borderTop: `1px solid #E9E9E9`,
					borderLeft: `${index % 3 ? 1 : 0}px solid #E9E9E9`,
				}
			},
			
			/**
			 * 点击了键盘
			 */
			onClick(index) {
				let res = ''
				// 是否随机打乱键盘
				let random = this.randomType === 4
				if (index < 9) {
					res = this.array[index]
				} else if (index === 9) {
					res = this.decimal ? '.' : ''
				} else if (index === 10) {
					res = this.array[9]
				} else {
					// -1表示删除
					res = -1
					random = false
				}
				this.$emit('click', res)
				if (random) {
					this.array = main.handleRandom(numbers).split('')
				}
			}
		}
	}
</script>

<style>
	.content {
		width: 33%;
		font-size: x-large;
		
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>